<div class="fx-row-vert-cent h-xl">
  <div class="tertiary f-600 mr-8 pl-12">Search</div>
  <form [formGroup]="formGroup"
        [class.active]="formGroup.get('search').value"
        (click)="inp.focus()"
        class="h-sm p-relative border-rad-4 mr-10">
    <span class="mina-icon icon-200 p-absolute f-20">search</span>
    <input #inp type="text" formControlName="search" placeholder="Sender or Hash"
           class="border-remove f-600 h-100 w-100 truncate">
    <span class="mina-icon icon-200 p-absolute pointer f-22"
          (click)="formGroup.get('search').setValue('')">close</span>
  </form>
</div>
<div class="fx-row-vert-cent h-xl">
  <mina-horizontal-menu [clz]="'pl-12 pr-12'"
                        [template]="template"></mina-horizontal-menu>

  <ng-template #template>
    <div class="tertiary f-600 mr-8">Filter</div>

    <ng-container *ngIf="filters">
      <div
        class="h-sm fx-row-vert-cent pl-5 pr-5 border-rad-6 pointer mr-5 f-600"
        [class.pointer-none]="zkApps === 0"
        [ngClass]="(filters.zkApp && zkApps !== 0) ? 'bg-container primary' : 'bg-container tertiary'"
        (click)="changeFilter('zkApp', !filters.zkApp)">
        <span class="mr-5">{{ zkApps }}</span>
        ZKApp command
      </div>

      <div
        class="h-sm fx-row-vert-cent pl-5 pr-5 border-rad-6 pointer mr-5 f-600"
        [class.pointer-none]="payments === 0"
        [ngClass]="(filters.payment && payments !== 0) ? 'bg-container primary' : 'bg-container tertiary'"
        (click)="changeFilter('payment', !filters.payment)">
        <span class="mr-5">{{ payments }}</span>
        Payment
      </div>

      <div
        class="h-sm fx-row-vert-cent pl-5 pr-5 border-rad-6 pointer mr-5 f-600"
        [class.pointer-none]="delegations === 0"
        [ngClass]="(filters.delegation && delegations !== 0) ? 'bg-container primary' : 'bg-container tertiary'"
        (click)="changeFilter('delegation', !filters.delegation)">
        <span class="mr-5">{{ delegations }}</span>
        Delegation
      </div>
    </ng-container>
  </ng-template>

</div>
